import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import _ from 'lodash';
import { View, DeviceEventEmitter } from 'react-native';
import { Icon } from 'native-base';
import {
  Home, Account, Message, ToDo,
} from '../pages/main-tabs';
import I18n from '../res/language';
import theme from '../native-base-theme/variables';

const TabRoutes = {
  // 首页
  Home: { screen: Home },
  // 待办
  ToDo: { screen: ToDo },
  // 消息
  // Message: { screen: Message },
  // 我的
  Account: { screen: Account },
};

const TabsNavigator = createBottomTabNavigator(
  TabRoutes,
  {
    initialRouteName: 'Home',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions: {
      activeTintColor: theme.tabActiveBgColor,
      inactiveTintColor: 'white',
      showLabel: false,
      style: {
        backgroundColor: 'black',
      },
    },
  },
);

const noHeaders = ['Home', 'Account'];
const hasEdits = ['ToDo'];

TabsNavigator.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const edit = () => DeviceEventEmitter.emit('showTodoModal', '');
  const editor = (
    <View style={{ flexDirection: 'row' }}>
      <Icon name="ios-search" style={{ color: 'white', padding: 10 }} onPress={edit} />
    </View>
  );

  const headerTitle = I18n.t(`tab.header.title.${routeName}`);

  const noHeaderStyle = {
    header: null,
  };
  const headerStyle = {
    headerTitle,
    headerTintColor: '#FFFFFF',
    headerStyle: {
      backgroundColor: theme.toolbarDefaultBg,
    },
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerLeft: routeName === 'ToDo' ? <View /> : null,
    headerRight: _.includes(hasEdits, routeName) ? editor : null,
  };

  return _.includes(noHeaders, routeName) ? noHeaderStyle : headerStyle;
};

export default TabsNavigator;
